<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
    <title>员工管理</title>
    <th:block th:replace="/backstage/common_resources::common_css"></th:block>
    <th:block th:replace="/backstage/common_resources::common_js"></th:block>
</head>

<body class="hold-transition skin-purple sidebar-mini">

<header th:replace="~{/backstage/common_header::header}"></header>
<aside th:replace="~{/backstage/common_aside::aside}"></aside>

    <div class="wrapper">
        <div class="content-wrapper">

            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    员工管理
                    <small>员工列表</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a th:href="@{/backstage/index}"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a th:href="@{/backstage/users/all}">员工管理</a></li>
                    <li class="active">员工列表</li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">

                <!-- .box-body -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">列表</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <form action="/backstage/users/find">
                                <div class="box-tools pull-left">
                                    <div class="has-feedback" style="display: flex">
                                        <input type="text" class="form-control input-sm" name="search"  placeholder="搜索">

                                        <button type="submit" class="glyphicon glyphicon-search ">

                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!--工具栏/-->

                            <!--数据列表-->
                            <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>

                                    <th >工号</th>
                                    <th >姓名</th>
                                    <th >性别</th>
                                    <th >电话</th>
                                    <th >部门</th>
                                    <th >工龄</th>
                                    <th >地址</th>
                                    <th sec:authorize="hasAnyAuthority('/boss')">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr th:each="users:${usersPage.records}">

                                    <td th:text="${users.username}"></td>
                                    <td th:text="${users.name}"></td>
                                    <td th:text="${users.sex}"></td>
                                    <td th:text="${users.phoneNum}"></td>
                                    <td th:text="${users.department}"></td>
                                    <td th:text="${users.workAge}"></td>
                                    <td th:text="${users.address}"></td>
                                    <td class="text-center" sec:authorize="hasAnyAuthority('/boss')" th:if="${users.status}">
                                        <span class="btn bg-gray btn-xs">无权操作</span>
                                    </td>
                                    <td class="text-center" sec:authorize="hasAnyAuthority('/boss')" th:if="!${users.status}">

                                        <a th:href="@{/backstage/users/edit(uid=${users.uid})}" class="btn bg-green btn-xs">修改</a>
                                        <a th:href="@{/backstage/users/delete(uid=${users.uid})}" class="btn bg-red btn-xs">开除</a>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                            <!--数据列表/-->
                            <!--工具栏/-->
                        </div>
                        <!-- 数据表格 /-->
                    </div>
                    <!-- /.box-body -->

                    <!-- .box-footer-->
                    <div class="box-footer">
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                总共 <span th:text="${usersPage.pages}"></span> 页，
                                共<span th:text="${usersPage.total}"></span> 条数据
                            </div>
                        </div>

                        <div class="box-tools pull-right">
                            <ul class="pagination"></ul>
                        </div>

                    </div>
                    <!-- /.box-footer-->
                </div>
            </section>
            <!-- 正文区域 /-->
        </div>
    </div>

<footer th:replace="~{/backstage/common_footer::footer}"></footer>
<script th:inline="javascript">

        var currentPage=[[${usersPage.current}]];
        var pages=[[${usersPage.pages}]];
        var context=[[${#servletContext.contextPath}]];
        // 分页插件

        $(".pagination").bootstrapPaginator({
            bootstrapMajorVersion: 3, // bootstrap版本
            currentPage: currentPage, // 当前页
            totalPages: pages, // 总页数
            numberOfPages: 5, // 最多显示多少页
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
                location.href =context+ "/backstage/users/all?page=" + page;
            }
        });

</script>
</body>

</html>